<template>
  <div class="form">
    <router-view></router-view>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{validator: validatorJudge, required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-field name="switch" label="开关">
      <template #input>
        <van-switch v-model="switchChecked" size="20" />
      </template>
    </van-field>
    <parent v-if="show" ref="parent"></parent>
    <span>as</span>
    <div v-if="data">
      <span v-for="item in data" :key="item">{{item}}</span>
    </div>
    <div style="display:flex;">
      <van-uploader :after-read="afterRead" v-model="fileList" multiple :max-count="2" />
      <!-- <img :src="img" alt="暂无" width="100px" height="100px" /> -->
    </div>
    <div>
      <van-progress :percentage="prog" />
    </div>
    <keep-alive include="" exclude="">
      <router-view></router-view>
    </keep-alive>
    <van-button @click="list">list</van-button>
  </div>
</template>

<script>
import parent from "./parent";
export default {
  data() {
    return {
      username: "",
      password: "",
      switchChecked: false,
      show: false,
      showProgress: false,
      data: [],
      img: "",
      prog: 0,
      fileList: [],
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    list () {
      this.$router.options.routes[0].children.push({
        //插入路由
        name: "lista",
        path: "/lista",
        component: (resolve) => require(["./listNew.vue"], resolve)
      })
      this.$router.addRoutes(this.$router.options.routes); //调用addRoutes添加路由
      this.$router.push({
        path: "/lista",
      });
      console.log(this.$router.options.routes)
    },
    validatorJudge(val) {
      let reg = /[0-9]/g;
      return new Promise((resolve, reject) => {
        this.$toast.loading("验证中...");
        resolve(reg.test(val));
        console.log(reg.test(val));
        reject(reg.test(reg));
      });
    },
    upload(form) {
     return this.$http.fileUploadProgress("http://localhost:3000/img1", form, {
        onUploadProgress: (progressEvent) => {
          let complete =
            (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%";
          this.prog = Number.parseFloat(complete);
        },
      });
    },
    async multipleUpload(file) {
      const form = new FormData();
      file.map((res) => {
        form.append("file", res.file);
      });
      this.showProgress = true
      let result = await this.upload(form);  
      if(result.data.ok) {
        this.$toast.success('成功文案');
        setTimeout(()=>{
          // this.showProgress = false
          this.prog = 0
        },2000)
      }
    },
    async singleUpload(file) {
      const form = new FormData();
      form.append("file", file.file);
      this.showProgress = true
      let result = await this.upload(form);
      console.log(result)
      if(result.data.ok) {
        this.$toast.success('成功文案');
        setTimeout(()=>{
          // this.showProgress = false
          this.prog = 0
        },2000)
      }
    },
    afterRead(file) {
      if (Array.isArray(file)) {
        this.multipleUpload(file);
      } else {
        this.singleUpload(file);
      }
    },
  },
  components: {
    parent,
  },
  mounted() {
    setTimeout(() => {
      this.show = true;
      this.data = [1, 2, 3, 4, 5];
      this.$nextTick(() => {
        console.log(this.$refs.parent.$refs.child);
      });
    }, 1000);
  },
};
</script>

<style>
.form {
}
</style>